import React, { FC, useMemo, useState } from 'react'
const UseMemoDemo: FC = () => {
    console.log('页面rerender')
    const [num1, setNum1] = useState(10)
    const [num2, setNum2] = useState(30)
    const [text, setText] = useState('hello')

    const sum = useMemo(() => {
        console.log('依赖数据 更新')
        return num1 + num2
    }, [num1, num2])

    return (
        <>
            <p>useMemo--{sum}</p>
            <p>
                {num1} <button onClick={() => setNum1(num1 + 1)}>add num1</button>
            </p>
            <p>
                {num2} <button onClick={() => setNum2(num2 + 1)}>add num2</button>
            </p>
            <div>
                <input onChange={e => setText(e.target.value)} value={text} />
            </div>
        </>
    )
}
export default UseMemoDemo
